<template>
    <div class="echarts-card">
        <div class="header">
            <div class="title">近一周活动发布</div>
            <div class="data-picker-wapper">
                <div class="btns">
                    <div
                        class="time-dimensionality"
                        :class="currentBtnIndex === index && 'active'"
                        v-for="(item, index) in btns"
                        :key="item.key"
                        @click="changeTime(index, item.key)"
                    >{{item.name}}</div>
                </div>
                <div class="data-picker">
                    <el-date-picker
                        v-model="times"
                        type="daterange"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :default-time="defaultTime"
                    />
                </div>
            </div>
        </div>

        <div class="charts-wapper">
            <div class="row flex-aic">
                <Charts1 style="flex: 2"/>
                <Charts2 style="flex: 1"/>
            </div>
            <div class="row flex charts-bottom" style="margin-top: 1.75rem; justify-content: flex-end;">
                <div style="flex: 2; " class="flex-aic">
                    <Charts3 style="flex: 1;"/>
                    <Charts4 style="flex: 1;"/>
                    <Charts5 style="flex: 1;"/>
                </div>
                <Table style="flex: 1"/>
            </div>
        </div>
    </div>
</template>
<script setup>
import {ref} from 'vue'
import dayjs from 'dayjs'
import Charts1 from "./Charts1.vue";
import Charts2 from "./Charts2.vue";
import Charts3 from "./Charts3.vue";
import Charts4 from "./Charts4.vue";
import Charts5 from "./Charts5.vue";
import Table from './Table.vue'

//当前按钮index
const currentBtnIndex = ref(1)
const btns = [
    {key: 'day', name: '今日'},
    {key: 'month', name: '本月'},
    {key: 'week', name: '本周'},
]

//日期选择器绑定值，长度2的数组
const times = ref([])
//日期选择器默认值
const defaultTime = ref([])
const changeTime = (index, key)=> {
    currentBtnIndex.value = index;
    initTime(key)
}


//初始化日期选择器的值,默认获取一周
const initTime = (type = 'week')=> {
    if(!['month', 'week', 'day'].includes(type)) throw '日期维度传入错误!';
    const timeType = {
        'month': 29,
        'week': 6,
        'day': 0
    }

    const todat = dayjs().format('YYYY-MM-DD')
    if(type !== 'day'){
        //获取 x天前的日期
        const start = dayjs().subtract(timeType[type], 'day').format('YYYY-MM-DD')
        times.value = [start, todat]
        defaultTime.value = [start, todat]
    }else{
        times.value = [todat, todat]
        defaultTime.value = [todat, todat]
    }

}
initTime()

</script>


<style scoped lang="scss">
.echarts-card{
    background: #fff;
    border-radius: 10px;
    padding: 1.375rem;
    position: relative;

    .header{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        .title{
            position: absolute;
            left: 0;
        }
        .data-picker-wapper{
            display: flex;
            .btns{
                display: flex;
                align-items: center;
                .time-dimensionality{
                    font-size: 0.75rem;
                    font-weight: 400;
                    cursor: pointer;
                    &:nth-child(2){
                        margin: 0 0.625rem;
                    }
                }
                .active{
                    color: #75A2F3;
                }
            }
            .data-picker{
                padding: 1.25rem;
                height: 1.875rem;
                border-radius: 10px;
                display: flex;
                align-items: center;
                margin-left: 1.527rem;
            }
        }

    }
}

.charts-bottom{

}
</style>

<style>

</style>